<template>
    <yh-dialog drag title="添加证券" :close-on-click-modal="false" :before-close="closeDialog" :visible="stockCodeDialog" width="600px">
        <div>
            <el-form label-width="100px" :model="queryForm" ref="queryStockForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="证券代码:" prop="stockCode">
                            <el-input v-model="queryForm.stockCode" placeholder="" clearable size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证券名称:" prop="stockNameSt">
                            <el-input v-model="queryForm.stockNameSt" placeholder="" clearable size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="12">
                        <el-form-item label="证券类型:" prop="stockType">
                            <el-select v-model="queryForm.stockType" placeholder="" size="mini" filterable>
                                <el-option
                                    v-for="item in StockTypeSelectData"
                                    :label="item.dictKey + item.dictKeyName"
                                    :value="item.dictKey"
                                    :key="item.dictKey"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="市场类型" prop="marketCode">
                            <el-select v-model="queryForm.marketCode" placeholder="" size="mini" filterable>
                                <el-option
                                    v-for="item in MarketTypeSelectData"
                                    :label="item.dictKey + item.dictKeyName"
                                    :value="item.dictKey"
                                    :key="item.dictKey"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="operate">
                <el-button size="mini" @click="resetForm">重 置</el-button>
                <el-button size="mini" type="primary" @click="getStockList(1)">搜 索</el-button>
            </div>
            <vxe-table
                v-loading="stockSearchLoading"
                :data="stockTable"
                border
                auto-resize
                size="mini"
                style="width: 100%"
                height="250px"
                header-align="center"
            >
                <vxe-column title="操作" width="60">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-check" size="mini" @click="stockSearchSubmit(scope.row)" type="primary"></el-button>
                    </template>
                </vxe-column>
                <vxe-column field="stockCode" title="证券代码" show-overflow></vxe-column>
                <vxe-column field="stockNameSt" title="证券名称" show-overflow></vxe-column>
                <vxe-column field="stockType" title="证券类别" show-overflow>
                    <template slot-scope="scope">
                        <span>{{ StockTypePojo[scope.row.stockType] }}</span>
                    </template>
                </vxe-column>
                <vxe-column field="marketCode" title="市场类型">
                    <template slot-scope="scope">
                        <span>{{ MarketTypePojo[scope.row.marketCode] }}</span>
                    </template>
                </vxe-column>
            </vxe-table>
            <div class="pagination">
                <el-pagination
                    background
                    @current-change="getStockList"
                    layout="total, prev, pager, next"
                    :current-page="pageVO.currentPage"
                    :page-size="pageVO.pageSize"
                    :total="pageVO.total"
                >
                </el-pagination>
            </div>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { getStockType } from '../../api';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'SearchStock',
})
export default class SearchStock extends Vue {
    @Prop()
    stockCodeDialog: boolean;
    @Prop()
    type: string;

    stockTable: any[] = [];

    // 证券查询表单
    queryForm: any = {};
    pageVO: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };
    stockSearchLoading = false;
    DictionConstUtil = DictionConstUtil;
    StockTypeSelectData: any[] = [];
    MarketTypeSelectData: any[] = [];
    AllMarketTypeData: any[] = [];

    StockTypePojo: any = {};
    MarketTypePojo: any = {};

    @Watch('type', { immediate: true, deep: true })
    async onWatchType() {
        this.AllMarketTypeData = await DictionConstUtil.FNMarketType();
        this.StockTypeSelectData = await DictionConstUtil.FNStockType();
        this.MarketTypePojo = DictionConstUtil.ListToPojo(this.AllMarketTypeData);
        this.StockTypePojo = DictionConstUtil.ListToPojo(this.StockTypeSelectData);
        this.getStockQueryParam();
    }

    // 重置表单
    resetForm() {
        (this.$refs.queryStockForm as any).resetFields();
    }

    // 表格列勾选事件
    stockSearchSubmit(row) {
        this.closeDialog();
        this.$emit('getStock', row);
    }

    // 关闭对话框
    closeDialog() {
        this.$emit('closeDialog');
    }

    // 根据指令不同获取对应的证券类型和交易市场
    getStockQueryParam() {
        let param: string = '';
        switch (this.type) {
            case '1':
                param = '1';
                this.queryForm.multMarketCode = ['1', '2', '6', 'H', 'n', 'o'];
                break;
            case '4':
                this.queryForm.multStockType = ['1'];
                this.queryForm.multMarketCode = ['1', '2'];
                this.StockTypeSelectData = [{ dictKey: '1', dictKeyName: '股票' }];
                break;
            case '5':
                param = '2';
                this.queryForm.multMarketCode = ['5'];
                break;
            case '6':
                param = '3';
                this.queryForm.multMarketCode = ['5'];
                break;
            case '10':
                param = '5';
                this.queryForm.multMarketCode = ['1', '2'];
                break;
            case '11':
                param = '4';
                this.queryForm.multMarketCode = ['1'];
                break;
            case '12':
                param = '6';
                this.queryForm.multMarketCode = ['7'];
                break;
            case '13':
                param = '7';
                this.queryForm.multMarketCode = ['6'];
                break;
            default:
                break;
        }
        this.MarketTypeSelectData = this.AllMarketTypeData.filter(item => this.queryForm.multMarketCode.includes(item.dictKey));
        if (['1', '5', '10', '11', '12', '13'].includes(this.type)) {
            this.queryStockTypes(param);
        }
        this.getStockList(this.pageVO.currentPage);
    }

    async queryStockTypes(param) {
        await getStockType(param).then(res => {
            this.StockTypeSelectData = res;
            this.queryForm.multStockType = res.map(ele => ele.dictKey);
            this.getStockList(this.pageVO.currentPage);
        });
    }

    // 获取证券代码
    getStockList(val: number) {
        this.stockSearchLoading = true;
        this.$axios
            .post('/original/stock/list', {
                ...this.queryForm,
                paging: {
                    currentPage: val,
                    pageSize: 25,
                },
            })
            .then((res: any) => {
                this.stockTable = res.list;
                this.pageVO.total = res.total;
                this.stockSearchLoading = false;
            });
    }
}
</script>
<style lang="scss" scoped>
tbody {
    .el-button {
        padding: 0;
    }

    .el-button--mini {
        padding: 2px 8px;
    }
}
.operate {
    margin-bottom: 10px;
    // margin: 10px 0;
    text-align: right;
}

/deep/ .el-dialog .el-dialog__body {
    max-height: 70vh;
}
/deep/ .el-form-item {
    margin-bottom: 5px !important;
}
</style>
